<template>
  <dt-modal-edit
    ref="edit"
    title="添加/编辑承接人"
    :width="900"
    @ok="onOk"
    @cancelData="cancelData"
    :cancelTip="cancelTip"
    alwaysTip>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150">
      <div class="addReceiver">
        <div class="case">
          <h3>
            <span>案场基本信息</span>
            <span class="delCase" @click="caseUnbound" v-if="delCaseBtnFlag">删除案场</span>
          </h3>
          <Row :gutter="24">
            <Col span="10">
              <FormItem label="案场：" prop="housesId" class="house_search">
                <Select
                  v-model="formValidate.housesId"
                  label-in-value
                  placeholder="请选择案场"
                  filterable
                  clearable
                  :remote-method="remoteMethodHouses"
                  @on-change="caseChange">
                  <Option v-for="(option, index) in optionsHouse" :value="option.housesId" :key="index">
                    {{ `${option.housesName}(${option.orgName})-${option.city}` }}
                  </Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="10">
              <!-- <FormItem label="呼入号归属地：" prop="city"> -->
              <FormItem label="呼入号归属地：">
                <!-- <Cascader :data="cityAttrSort" v-model="formValidate.cityId"
                :load-data="loadDataCity"></Cascader> -->
                <Select
                  v-model="formValidate.city"
                  clearable
                  placeholder="请选择归属地"
                  @on-change="cityChange">
                  <Option v-for="(option, index) in cityList" :value="option" :key="index">
                    {{ option }}
                  </Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <div class="huan">
                <!-- <FormItem label="呼入号码：" prop="inPhoneX"> -->
                <FormItem label="呼入号码：">
                  <Select
                    v-model="formValidate.inPhoneX"
                    @on-clear="huruChange"
                    placeholder="请选择呼入隐私号"
                    clearable>
                    <Option v-for="(item, index) in callInPhoneList" :key="index" :value="item.phoneX">
                      {{ item.phoneX }}
                    </Option>
                  </Select>
                </FormItem>
                <span @click="changeBatch('in')">换一批</span>
              </div>
            </Col>
          </Row>
        </div>
        <div class="receiverForm">
          <h3>
            承接人信息
            <span class="addBtn" @click="creatAdd">新增</span>
          </h3>
          <div class="receiverGun">
            <div
              class="receiverFormBox"
              v-for="(item, index) in formValidate.adviserList"
              :key="index + '-receiverFormBox'">
              <div class="addData">
                <Row :gutter="24">
                  <Col span="12">
                    <FormItem
                      label="顾问姓名："
                      :prop="`adviserList.${index}.userId`"
                      :rules="ruleValidate.userId"
                      class="house_search">
                      <Select
                        v-model="item.userId"
                        label-in-value
                        clearable
                        :disabled="item.disabledFlag"
                        filterable
                        placeholder="请选择顾问"
                        @on-change="
                          (e) => {
                            return receiverUserChange(e, index)
                          }
                        ">
                        <Option v-for="(option, index) in optionsUser" :value="option.userId" :key="index">
                          {{ `${option.userName}(${option.workNo})` }}
                        </Option>
                      </Select>
                    </FormItem>
                  </Col>
                  <Col span="12">
                    <FormItem
                      label="呼出号归属地："
                      :prop="`adviserList.${index}.city`"
                      :rules="ruleValidate.city">
                      <Select
                        v-model="item.city"
                        clearable
                        :disabled="item.disabledFlag"
                        placeholder="请选择归属地"
                        @on-change="
                          (e) => {
                            return receivercityChange(e, index)
                          }
                        ">
                        <Option v-for="(option, index) in cityList" :value="option" :key="index">
                          {{ option }}
                        </Option>
                      </Select>
                    </FormItem>
                  </Col>
                  <Col span="12">
                    <div class="huan">
                      <!-- @on-open-change='e=>{return callOutPhoneSel(e,item,index)}' -->
                      <FormItem
                        label="呼出隐私号："
                        :prop="`adviserList.${index}.outPhoneX`"
                        :rules="ruleValidate.outPhoneX">
                        <Select
                          v-model="item.outPhoneX"
                          placeholder="请选择呼出隐私号"
                          :disabled="item.disabledFlag"
                          clearable>
                          <Option
                            v-for="(option, index) in item.callOutPhoneList"
                            :key="index"
                            :value="option.phoneX">
                            {{ option.phoneX }}
                          </Option>
                        </Select>
                      </FormItem>
                      <Button
                        :disabled="item.disabledFlag"
                        @click="changeBatch('out', item, index)"
                        type="text">
                        换一批
                      </Button>
                    </div>
                  </Col>
                  <Col span="12">
                    <FormItem
                      label="承接线索类型："
                      :prop="`adviserList.${index}.clueType1`"
                      :rules="ruleValidate.clueType1">
                      <CheckboxGroup v-model="item.clueType1" @on-change="changeClueType(item, index)">
                        <Checkbox :disabled="item.disabledFlag || item.clueType1.indexOf(4) != -1" :label="1">
                          电话
                        </Checkbox>
                        <Checkbox :disabled="item.disabledFlag || item.clueType1.indexOf(4) != -1" :label="2">
                          表单
                        </Checkbox>
                        <Checkbox
                          :disabled="
                            item.disabledFlag ||
                            item.clueType1.indexOf(1) != -1 ||
                            item.clueType1.indexOf(2) != -1
                          "
                          :label="4">
                          仅外呼
                        </Checkbox>
                      </CheckboxGroup>
                    </FormItem>
                  </Col>
                </Row>
              </div>
              <div class="addBtn">
                <span v-if="!item.disabledFlag" @click="addBtnSave(index)">保存</span>
                <span v-if="!item.disabledFlag" @click="addBtnCancel(item, index)">取消</span>
                <span v-if="item.disabledFlag" @click="addBtnEdit(index)">编辑</span>
                <span @click="addBtnDel(index)">删除</span>
              </div>
            </div>
          </div>
          <!-- <dt-info :label-width="90" ref='info2' :options='options2' style="width: 45%;" /> -->
        </div>
      </div>
    </Form>
    <Modal v-model="modal1" title="删除" :footer-hide="true">
      <p style="text-align: center; padding: 20px 0">
        删除该案场会释放案场呼入号及所有呼出号，是否确认要删除？
      </p>
      <div class="transferFooter">
        <Button @click="modal1 = false">取消</Button>
        <Button type="info" @click="delsave" :disabled="btnDisabled">
          {{ okText }}
        </Button>
      </div>
    </Modal>
  </dt-modal-edit>
</template>

<script>
  // import addEdit from '../opt/addEdit'
  import caseMgr from '@/biz/crimeSceneList'
  import receiverMgr from '@/biz/receiver/receiver'
  let setIN = null
  export default {
    data() {
      return {
        btnDisabled: true,
        modal1: false,
        delCaseBtnFlag: false,
        receiverDetails: null,
        cancelTip: '取消后会放弃该页面所有更改已保存操作，是否确认取消？',
        teamUserByRoleList: [],
        cityList: [],
        caseInfo: {},
        cityInfo: '',
        noEditFlag: true,
        oldFormValidate: {},
        originalFormValidate: {},
        formValidate: {
          housesName: '',
          housesId: null,
          buildingId: null,
          buildingName: '',
          city: '',
          inPhoneX: '',
          adviserList: [
            {
              phone: '',
              disabledFlag: false,
              callOutPhoneList: [],
              userName: '',
              userId: '',
              userNameInfo: {},
              city: '',
              receiverCityInfo: '',
              outPhoneX: '',
              clueType: null,
              clueType1: []
            }
          ]
        },
        ruleValidate: {
          housesId: [
            {
              required: true,
              message: '请选择案场',
              trigger: 'blur',
              type: 'number'
            }
          ],
          city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
          inPhoneX: [{ required: true, message: '请选择呼入隐私号', trigger: 'blur' }],

          userId: [
            {
              pattern: /^\d+$/,
              required: true,
              message: '请选择顾问',
              trigger: 'blur'
            }
            // { required: true, message: '请选择顾问', trigger: 'blur' },
          ],

          city: [{ required: true, message: '请选择城市', trigger: 'blur' }],
          outPhoneX: [
            {
              pattern: /^\d+$/,
              required: true,
              message: '请选择呼出隐私号',
              trigger: 'blur'
            }
          ],
          clueType1: [
            {
              pattern: /^\d+$/,
              required: true,
              type: 'array',
              message: '请选择承接线索类型',
              trigger: 'blur'
            }
          ]
        },
        cityAttrSort: [],
        optionsHouse: [],
        callInPhoneList: [],
        optionsUser: [],

        caseInfoBuilding: '',
        okText: 5,

        callInPage: {
          total: 0,
          page: 1,
          rows: 10
        },
        callInPages: '',

        callOutPage: {
          total: 0,
          page: 1,
          rows: 10
        },
        callOutPages: '',

        currentCasePhoneX: null,
        currentOutPhoneX: null
      }
    },

    methods: {
      // 换一换
      changeBatch(newType, item, index) {
        if (newType == 'in') {
          ++this.callInPage.page
          if (this.callInPages < this.callInPage.page) {
            this.callInPage.page = 1
          }
          this.formValidate.inPhoneX = ''
          this.callInPhoneSel().then(() => {
            this.$Message.success('已更换')
          })
        } else {
          ++this.callOutPage.page
          if (this.callOutPages < this.callOutPage.page) {
            this.callOutPage.page = 1
          }
          this.callOutPhoneSel(item.city, item.userId).then((data) => {
            this.$Message.success('已更换')
            this.$set(item, 'callOutPhoneList', data)
            item.outPhoneX = ''
          })
        }
      },
      //仅外呼与电话和表单互斥，选择仅外呼电话和表达都要自动去掉勾
      changeClueType(item, index) {
        let data = item
        data.clueType1.forEach((item) => {
          if (item == 4) {
            data.clueType1 = [4]
          }
        })
        this.formValidate.adviserList[index] = data
        this.$forceUpdate()
      },
      // 解绑
      delsave() {
        let params = {
          buildingId: this.caseInfoBuilding ? this.caseInfoBuilding : this.caseInfo.value
        }
        receiverMgr.removeBuildingAndAdviser(params).then((res) => {
          this.modal1 = false
          this.$refs.edit.hide()
          this.okText = 5
          this.btnDisabled = true
          this.$emit('dataRefresh')
        })
      },
      caseUnbound() {
        if (this.okText == 5) {
          setIN = setInterval(() => {
            this.okText--
            if (this.okText == 0) {
              this.okText = '确认'
              this.btnDisabled = false
              clearInterval(setIN)
            }
          }, 1000)
        }

        this.modal1 = true
      },

      getTeamUserByRole(buildingId, query) {
        let params = {
          buildingId: buildingId ? buildingId : this.caseInfo.value,
          searchKey: query
        }
        receiverMgr.getTeamUserByRole(params).then((res) => {
          this.optionsUser = res || []
        })
      },

      // 隐私号请求
      getPhoneByCity(type, buildingId, city, userId, index) {
        let params = {
          buildingId: buildingId,
          city: city,
          type: type,
          userId: userId
        }
        receiverMgr
          .getPhoneByCity(params)
          .then((res) => {
            if (res.list && res.list.length) {
              if (index !== undefined) {
                this.formValidate.adviserList[index].outPhoneX = ''
                if (res.list.length < 1) {
                  this.$Message.warning('当前没有可用呼出号')
                  return false
                }
                this.formValidate.adviserList[index].callOutPhoneList = res.list

                res.list.forEach((item) => {
                  if (item.existence) {
                    this.formValidate.adviserList[index].outPhoneX = item.phoneX
                  }
                })

                // if (res[0].existence) {
                //   this.formValidate.adviserList[index].outPhoneX = res[0].phoneX
                //   if (res[0].clueType == 3) {
                //     this.formValidate.adviserList[index].clueType1 = [1, 2]
                //   } else {
                //     this.formValidate.adviserList[index].clueType1 = [res[0].clueType]

                //   }
                // }
                // if (type == 3) {
                //   this.formValidate.adviserList[index].callOutPhoneList = this.formValidate
                //     .adviserList[index].callOutPhoneList.concat(res)
                // }
              } else {
                if (res.list.length < 1) {
                  this.$Message.warning('当前没有可用呼入号')
                  return false
                }

                this.callInPhoneList = res.list
                this.callInPhoneList.forEach((item) => {
                  if (item.existence) {
                    this.formValidate.inPhoneX = item.phoneX
                  }
                })
              }
            } else {
              this.formValidate.adviserList[index].callOutPhoneList = []
              this.formValidate.adviserList[index].outPhoneX = ''
            }
          })
          .catch((err) => {})
      },

      // 城市类表
      getCityDictionaries() {
        receiverMgr.getCityDictionaries().then((res) => {
          this.cityList = res
        })
      },
      // 案场选择
      caseChange(val) {
        this.resetAllData()
        if (val && val.value) {
          this.caseInfo = val
          receiverMgr.getReceiverInfoByBId({ buildingId: val.value }).then((res) => {
            if (res) {
              if (res.buildingId) {
                this.caseInfoBuilding = res.buildingId
                this.getTeamUserByRole(res.buildingId)
              }
              if (res.receiverInfoVOList.length > 0) {
                this.delCaseBtnFlag = true
              }
              res.receiverInfoVOList.forEach((item) => {
                item.disabledFlag = true
                item.userNameInfo = {
                  value: item.userId,
                  label: ''
                }
              })
              this.receiverDetails = res
              this.formValidate = res //总数据

              console.log(res, this.formValidate, '总数据')

              // 案场信息
              this.formValidate.inPhoneX = res.inPhoneX
              if (res.city && res.inPhoneX) {
                this.callInPhoneSel().then((data) => {
                  let _index = data.findIndex((item) => {
                    return item.phoneX == res.inPhoneX
                  })
                  if (_index == '-1') {
                    this.currentCasePhoneX = {
                      phoneX: res.inPhoneX
                    }
                    this.callInPhoneList.push(this.currentCasePhoneX)
                  } else {
                    this.currentCasePhoneX = null
                  }
                })
              }

              this.formValidate.buildingId = res.buildingId
              this.formValidate.buildingName = res.buildingName
              this.formValidate.housesName = res.buildingName
              this.formValidate.housesId = res.buildingId

              this.formValidate.adviserList = res.receiverInfoVOList

              this.formValidate.adviserList.forEach((item) => {
                this.callOutPhoneSel(item.city, item.userId).then((data) => {
                  item.callOutPhoneList = []

                  item.callOutPhoneList = data

                  let _index = data.findIndex((item) => {
                    return item.phoneX == res.outPhoneX
                  })
                  if (_index == '-1') {
                    this.currentOutPhoneX = {
                      phoneX: res.outPhoneX
                    }
                    // this.callOutPhoneList.push(this.currentOutPhoneX)
                  } else {
                    this.currentOutPhoneX = null
                  }
                })

                if (item.clueType == 3) {
                  item.clueType1 = [1, 2]
                } else {
                  item.clueType1 = [item.clueType]
                }
              })
            } else {
              this.getTeamUserByRole(val.value)
              this.formValidate.buildingId = val.value
              this.formValidate.buildingName = val.label.split('(')[0].trim()
              this.formValidate.housesName = val.label.split('(')[0].trim()
              this.formValidate.housesId = val.value
            }

            this.originalFormValidate = this.$tool.deepClone(this.formValidate)
          })
        }
      },
      huruChange() {
        this.formValidate.city = ''
      },
      // 案场城市选择
      cityChange(val) {
        this.cityInfo = val
        this.formValidate.city = val
        this.formValidate.inPhoneX = ''
        if (this.cityInfo && this.caseInfo.value) {
          this.callInPhoneSel()
        }
      },
      // 承接人顾问选择
      receiverUserChange(val, index) {
        if (val && val.value) {
          let chooseUser = this.optionsUser.find((item) => {
            return item.userId == val.value
          })
          this.formValidate.adviserList[index].userNameInfo = val
          this.formValidate.adviserList[index].phone = chooseUser.phone
        }
        if (val && val.value && this.formValidate.adviserList[index].receiverCityInfo) {
          // this.getPhoneByCity(2, this.caseInfo.value, this.formValidate
          //   .adviserList[index].receiverCityInfo, val.value, index)

          this.callOutPhoneSel(this.formValidate.adviserList[index].receiverCityInfo, val.value).then(
            (data) => {
              this.$set(this.formValidate.adviserList[index], 'callOutPhoneList', data)
              this.formValidate.adviserList[index].outPhoneX = ''
            }
          )
        }
      },
      // 承接人城市
      receivercityChange(val, index) {
        this.formValidate.adviserList[index].receiverCityInfo = val

        if (
          this.formValidate.adviserList[index].userNameInfo &&
          this.formValidate.adviserList[index].userNameInfo.value &&
          val
        ) {
          this.callOutPhoneSel(val, this.formValidate.adviserList[index].userNameInfo.value).then((data) => {
            this.$set(this.formValidate.adviserList[index], 'callOutPhoneList', data)
            this.formValidate.adviserList[index].outPhoneX = ''
          })
        }
      },
      resetAllData() {
        this.formValidate = {
          housesName: '',
          housesId: null,
          buildingId: null,
          buildingName: '',
          city: '',
          inPhoneX: '',
          adviserList: [
            {
              phone: '',
              disabledFlag: false,
              callOutPhoneList: [],
              userName: '',
              userId: '',
              userNameInfo: {},
              city: '',
              receiverCityInfo: '',
              outPhoneX: '',
              clueType: null,
              clueType1: []
            }
          ]
        }
      },
      callInPhoneSel(val) {
        return new Promise((resolve, reject) => {
          let params = {
            page: this.callInPage.page,
            rows: this.callInPage.rows,
            buildingId: this.caseInfo.value,
            city: this.formValidate.city,
            type: 1
          }
          receiverMgr.getPhoneByCity(params).then((res) => {
            if (res.list && res.list.length) {
              this.callInPages = res.pages
              this.callInPhoneList = res.list
              // this.callInPhoneList.forEach(item => {
              //   if (item.existence) {
              //     this.formValidate.inPhoneX = item.phoneX
              //   }
              // })
              resolve(res.list)
            } else {
              this.$Message.warning('当前没有可用呼入号')
            }
          })
          // }
        })
      },
      // 承接人隐私号
      callOutPhoneSel(city, userId) {
        return new Promise((resolve, reject) => {
          // if (this.formValidate.adviserList[index].callOutPhoneList.length < 1) {
          //   this.$Message.warning('当前没有可用呼出号')
          // }
          let params = {
            page: this.callOutPage.page,
            rows: this.callOutPage.rows,
            buildingId: this.caseInfo.value,
            city,
            type: 2,
            userId
          }
          receiverMgr.getPhoneByCity(params).then((res) => {
            this.callOutPages = res.pages
            if (res.list && res.list.length) {
              resolve(res.list)
              // this.$set(this.formValidate.adviserList[index], 'callOutPhoneList', res
              //   .list)
              // this.$forceUpdate()
            }
          })
        })
      },
      creatAdd() {
        let obj = {
          phone: '',
          disabledFlag: false,
          callOutPhoneList: [],
          userName: '',
          userId: '',
          userNameInfo: {},
          city: '',
          receiverCityInfo: '',
          outPhoneX: '',
          clueType: null,
          clueType1: []
        }
        this.$set(this.formValidate.adviserList, this.formValidate.adviserList.length, obj)
        this.$forceUpdate()
      },
      addBtnDel(index) {
        this.formValidate.adviserList.splice(index, 1)
        this.$forceUpdate()
      },
      addBtnSave(index) {
        let outPhoneAll = [],
          userIdList = []

        this.formValidate.adviserList.forEach((item) => {
          if (item.outPhoneX) {
            outPhoneAll.push(item.outPhoneX)
          }
          if (item.userId) {
            userIdList.push(item.userId)
          }
        })
        let userIdListRepeat = new Set(userIdList)
        let outPhoneAllNORepeat = new Set(outPhoneAll)
        let _flag = outPhoneAll.findIndex((item) => {
          return item == this.formValidate.inPhoneX
        })
        if (_flag > -1) {
          this.$Message.warning('承接人的呼出隐私号和呼入隐私号不可重复')
          return false
        }
        if (outPhoneAll.length != outPhoneAllNORepeat.size) {
          this.$Message.warning('承接人的呼出隐私号不可重复')
          return false
        }
        if (userIdList.length != userIdListRepeat.size) {
          this.$Message.warning('承接人不可重复')
          return false
        }
        let clueTypeAll = []
        this.formValidate.adviserList.forEach((item) => {
          clueTypeAll.push(...item.clueType1)
        })
        let num = 0
        clueTypeAll.forEach((item) => {
          if (item == 1) {
            num++
          }
        })
        if (num > 3) {
          this.$Message.warning('同一个案场，电话承接人不能超过3个')
          return false
        }
        this.formValidate.adviserList[index].disabledFlag = true
      },

      addBtnCancel(val, index) {
        // this.$refs.formValidate.resetFields()
        val.disabledFlag = true
        val.userName = this.oldFormValidate.adviserList[index].userName
        val.userId = this.oldFormValidate.adviserList[index].userId
        val.outPhoneX = this.oldFormValidate.adviserList[index].outPhoneX
        val.clueType1 = this.oldFormValidate.adviserList[index].clueType1
        val.city = this.oldFormValidate.adviserList[index].city
        val.callOutPhoneList = this.oldFormValidate.adviserList[index].callOutPhoneList
      },
      addBtnEdit(index) {
        if (!this.caseInfo.value) {
          this.$Message.warning('请先选择案场。')
          return false
        } else {
          this.formValidate.adviserList[index].disabledFlag = false
          this.oldFormValidate = JSON.parse(JSON.stringify(this.formValidate))
        }
      },
      remoteMethodHouses(query) {
        console.log(query, 'aaa')
        if (query !== '') {
          caseMgr.getHousesNames({ housesName: query }, 'receiver').then((res) => {
            this.optionsHouse = res.list || []
          })
        } else {
          this.optionsHouse = []
        }
      },
      onOk() {
        this.$refs.formValidate.validate((valid) => {
          if (valid) {
            let saveCheck = this.formValidate.adviserList.some((item) => {
              return item.disabledFlag == false
            })
            if (saveCheck) {
              this.$Message.warning('请先保存所有承接人信息')
              return false
            }

            let outPhoneAll = [],
              userIdList = []

            this.formValidate.adviserList.forEach((item) => {
              if (item.outPhoneX) {
                outPhoneAll.push(item.outPhoneX)
              }
              if (item.userId) {
                userIdList.push(item.userId)
              }
            })

            let userIdListRepeat = new Set(userIdList)
            let outPhoneAllNORepeat = new Set(outPhoneAll)
            let _flag = outPhoneAll.findIndex((item) => {
              return item == this.formValidate.inPhoneX
            })
            if (_flag > -1) {
              this.$Message.warning('承接人的呼出隐私号和呼入隐私号不可重复')
              return false
            }
            if (userIdList.length != userIdListRepeat.size) {
              this.$Message.warning('承接人不可重复')
              return false
            }
            if (outPhoneAll.length != outPhoneAllNORepeat.size) {
              this.$Message.warning('承接人的呼出隐私号不可重复')
              return false
            }

            let clueTypeAll = []
            this.formValidate.adviserList.forEach((item) => {
              clueTypeAll.push(...item.clueType1)
            })

            let telFlag = clueTypeAll.some((item) => {
              return item == 1
            })

            if (!telFlag) {
              this.$Message.warning('同一个案场，必须配置一个电话类型承接人')
              return false
            }
            this.formValidate.adviserList.forEach((item) => {
              if (item.clueType1.length > 1) {
                item.clueType = 3
              } else {
                item.clueType = item.clueType1[0]
              }
            })
            if (!this.formValidate.inPhoneX) {
              this.formValidate.inPhoneX = ''
            }
            if (!this.formValidate.city) {
              this.formValidate.city = ''
            }
            let params = this.formValidate

            // 对比原来的数据
            console.log(params, this.originalFormValidate, '两个数据')

            params.adviserList.forEach((item) => {
              let oldData = this.originalFormValidate.adviserList.find((adItem) => {
                return item.userId == adItem.userId
              })
              if (!oldData) {
                item.isNew = true
              } else {
                if (item.outPhoneX != oldData.outPhoneX) {
                  item.isNew = true
                }
              }
              console.log(item, 'dddd')
            })
            console.log(params.adviserList, 'params.adviserList')

            let delUserId = []
            console.log(params.adviserList, 'params.adviserList1')
            this.originalFormValidate.adviserList.forEach((item) => {
              console.log(item, 'oldItem')
              let newData = params.adviserList.find((adItem) => {
                return item.userId == adItem.userId
              })

              console.log(newData, item, 'newData11')
              if (!newData) {
                delUserId.push(item.userId)
              } else {
                if (item.outPhoneX != newData.outPhoneX) {
                  console.log(item.userId, item, 'item.userId')
                  delUserId.push(item.userId)
                }
              }
              console.log(item, 'dddd1')
            })

            params.delUserId = delUserId

            console.log(params, '222222222')

            // 对比原来的数据

            receiverMgr.receiverSaveOrUpdate(params).then((res) => {
              this.$emit('dataRefresh')
              this.$Message.success('成功')

              this.cancelData1()
              this.$refs.edit.hide()
            })
          }
        })
      },
      show(val) {
        console.log(val, 'show')
        if (val && val.value) {
          this.caseInfo = val
          this.remoteMethodHouses(val.label)
          this.caseChange(val)
        } else {
          this.oldFormValidate = JSON.parse(JSON.stringify(this.formValidate))
        }
        this.$refs.edit.show()
        this.getCityDictionaries()
      },
      cancelData() {
        this.cancelData1()
      },
      cancelData1() {
        this.formValidate = {
          housesName: '',
          housesId: null,
          buildingId: null,
          buildingName: '',
          city: '',
          inPhoneX: '',
          adviserList: [
            {
              phone: '',
              disabledFlag: false,
              callOutPhoneList: [],
              userName: '',
              userId: '',
              userNameInfo: {},
              city: '',
              receiverCityInfo: '',
              outPhoneX: '',
              clueType: null,
              clueType1: []
            }
          ]
        }
        this.callInPhoneList = []
        this.optionsUser = []
        this.delCaseBtnFlag = false

        this.$refs.formValidate.resetFields()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .addReceiver {
    .huan {
      display: flex;
      flex-direction: row;
      line-height: 30px;

      .ivu-btn-text {
        color: #2b85e4;
      }

      .ivu-btn-text[disabled] {
        color: #c5c8ce;
      }

      span {
        margin-left: 10px;
        color: #2d8cf0;
        cursor: pointer;
      }
    }

    .case {
      border-bottom: 1px #ccc solid;

      h3 {
        margin-bottom: 10px;
        font-weight: bold;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .delCase {
          color: #2b85e4;
          font-size: 14px;
          display: inline-block;
          padding-right: 10px;
          font-weight: normal;
          cursor: pointer;
        }
      }
    }

    .receiverForm {
      margin-top: 30px;

      .receiverGun {
        height: 400px;
        overflow-x: hidden;
        overflow-y: auto;

        .receiverFormBox {
          border-top: 1px #ccc dashed;
          padding-top: 30px;
          display: flex;
          flex-direction: row;

          .addData {
            flex: 1;
          }

          .addBtn {
            width: 140px;
            padding-left: 20px;

            span {
              display: inline-block;
              padding: 0 5px;
              line-height: 34px;
            }
          }
        }

        .receiverFormBox:nth-child(1) {
          border: none;
        }
      }

      .addBtn {
        color: #2b85e4;
        font-weight: normal;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }

  .transferFooter {
    margin-top: 20px;
    text-align: center;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }
</style>
